<template>
  <view>
    <view class="head bg-yellow p-b-20">
      <u-navbar
        title="兑换优惠券"
        :autoBack="true"
        bgColor="#1D1D20"
        :placeholder="true"
        leftIconColor="#ffffff"
        :titleStyle="{ color: '#ffffff' }"
      />
      <view class="flex justify-between m-lr-30 m-tb-40">
        <view class="text-white">
          <view class="font-32">今日看广告数量</view>
          <view class="font-48 text-bold margin-top-sm">{{
            totalNum || 0
          }}</view>
        </view>
        <view class="record-btn" @click="toRecord">兑换记录</view>
      </view>
      <view class="bg-white margin radius-6 padding-lr p-t-20 p-b-15">
        <view class="flex">
          <view class="font-34 text-black3 text-bold">兑换优惠券</view>
        </view>
        <view class="form-box">
			<view class="item">
				<input
				  type="number"
				  placeholder="请输入兑换的广告数量"
				  v-model="amount"
				  :min="10"
				/>
				<view class="all-btn" @click="handleAll">全部</view>
			</view>
        </view>
		<view class="bg-white font-24"
			<p class="m-t-30 color-r">兑换规则：</p>
			<p class="color-r">1、每天只能兑换一次</p>
			<p class="color-r">2、10个广告数量可兑换1元优惠券</p>
			<view class="bottomBtn" @tap="exchange">确认兑换</view>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFile } from "@/common/utils/uploadImg.js";
import { customerInfo } from "@/common/api/customer.js";
import { toWithdrawal, lookVideoTotal, exchangeCoupon } from "@/common/api/xyc.js";
import {
  transferToTrRate,
  transferToTr,
  checkAdsAccount,
} from "@/common/api/advertising.js";
import {  } from "@/common/api/xyc.js";
export default {
  data() {
    return {
      amount: null,
	  totalNum: 0,//看广告数量
    };
  },
  onLoad() {
    this.getTotal();
  },
  methods: {
    // 查看观看视频总数
    getTotal() {
      lookVideoTotal().then((res) => {
        if (res.code == 200) {
          this.totalNum = res.extend.total;
        }
      });
    },
	//兑换记录
    toRecord() {
      uni.navigateTo({
        url: "/pages/my/advertising/couponRecord",
      });
    },
	// 全部
    handleAll() {
      this.amount = this.totalNum || 0;
    },
	// 兑换
    exchange() {
      if (!this.amount) {
        return this.$msg("请正确输入广告数量");
      }
      if (this.amount > this.totalNum) {
        return this.$msg("输入的广告数量不能大于今日观看广告数量");
      }
      uni.showLoading({
        title: "兑换中",
        mask: true,
      });
      let data = {
        advertNumber: Number(this.amount)
      };
      exchangeCoupon(data)
        .then((res) => {
          uni.hideLoading();
          this.$msg(res.message);
          if (res.code == 200) {
            this.amount = null;
          }
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.head {
	
}
.record-btn {
  width: 148rpx;
  height: 48rpx;
  background: #ffffff;
  border-radius: 100rpx 100rpx 100rpx 100rpx;
  opacity: 1;
  border: 1rpx solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eca52b;
}
.form-box {
  width: 100%;
  border-radius: 16rpx;
  background: #f2f3f5;
  margin-top: 30rpx;
  .item {
    display: flex;
    align-items: center;
    width: 100%;

    input {
      font-size: 28rpx;
      flex: 1;
      display: block;
      height: 92rpx;
      line-height: 92rpx;
      outline: none;
      border: 0px;
      padding-left: 30rpx;
    }
    input::placeholder {
      font-size: 28rpx;
      color: #999999;
    }
    .all-btn {
      width: 200rpx;
      height: 76rpx;
      background-color: #eca52b;
      // background: linear-gradient(42deg, #ECA52B 0%, #FC7844 100%);
      font-size: 32rpx;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      margin-right: 8rpx;
    }
  }
}

.bottomBtn {
  width: 622rpx;
  height: 88rpx;
  background-color: #eca52b;
  // background: linear-gradient(42deg, #ECA52B 0%, #FC7844 100%);
  box-shadow: 0 2rpx 10rpx 1rpx rgba(250, 49, 33, 0.24);
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #ffffff;
  margin: 80rpx auto 30rpx auto;
}
</style>
